<template>
  <div style="padding: 20px;">
  <!--el-table数据表格组件-->
  <el-table
      :data="userData"
      :header-cell-style="{ background: '#f6f9fa'}">
    <!--el-table-column列-->
    <el-table-column prop="id" label="ID" width="80"></el-table-column>
    <el-table-column prop="userName" label="用户名"></el-table-column>
    <el-table-column prop="email" label="电子邮箱"></el-table-column>
    <el-table-column prop="registrationDate" label="注册日期"></el-table-column>
    <el-table-column label="操作" min-width="180">
      <template #default="{ row }">
        <el-button type="primary" size="small" :icon="Edit"  @click="handleEdit(row)">编辑</el-button>
        <el-button type="danger" size="small" :icon="Delete" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script setup>
//导入图标组件
import { Plus,Delete,Edit } from '@element-plus/icons-vue'
import axios from 'axios'
import { ref, onMounted } from 'vue'

const userData = ref([])//定义用户信息数据
//组件挂载到DOM后执行后端数据加载
onMounted(() => {
  axios.get('/api/chapter03/users')
      .then(response => {
        console.log(response.data)
        userData.value = response.data
      })
      .catch(error => {
        console.log(error)
      })
})
function handleEdit(row) {// 处理编辑按钮点击事件
  console.log('点击编辑按钮:', row)
}
function handleDelete(row) {// 处理删除按钮点击事件
  console.log('点击删除按钮:', row)
}
</script>
